let uls = document.querySelectorAll("ul");
let lis = document.querySelectorAll("li");
let liWidth = document.querySelector("#box ul").offsetWidth - 1; //设置隐藏ul之间的间隔

/*
 * 通过下面布局中代码实现每个 li.children.length 要么为0 要么为2
 * 0 无下级菜单
 * 2 有下级菜单
 */

for (let i = uls.length - 1; i >= 0; i--) {
    if (uls[i].parentNode.nodeName === "LI") {
        uls[i].parentNode.classList.add("relative"); //让ul相对定位
        uls[i].classList.add("absolute");
        uls[i].style.left = liWidth + "px";
    }
}
for (var i = 0; i < lis.length; i++) {
    if (lis[i].children.length === 1) { //没有下一级菜单直接删除
        lis[i].children[0].outerHTML = "";
    };
}


for (let i = 0; i < lis.length; i++) {

    lis[i].onmouseover = function() {
        if (lis[i].children.length === 2) { //有内容节点和span节点的li
            this.children[1].classList.remove("hide");
            this.children[1].classList.add("show");
        }
    }
    lis[i].onmouseout = function() {

        if (lis[i].children.length === 2) {
            this.children[1].classList.remove("show");
            this.children[1].classList.add("hide");
        }
    }
}